import React      from 'react'
import ReactDOM   from 'react-dom'
import { BrowserRouter as Router, Route, Redirect, Switch, Link } from 'react-router-dom'
// 页面
import Home           from './pages/home/index.jsx'
import Layout         from './component/layout/index.jsx'
import ProductRouter  from './pages/product/router.jsx'
import Login          from './pages/login/index.jsx'
import OrderList      from './pages/order/index.jsx'
import OrderDetail      from './pages/order/detail.jsx'
import UserList       from './pages/user/index.jsx'
import ErrorPage      from './pages/error/index.jsx'

class App extends React.Component {
  render () {
    let LayoutRouter = (
      <Layout>
        <Switch>
          <Route exact path="/" component={Home}/>
          <Route path="/product" component={ProductRouter}/>
          <Route path="/product-category" component={ProductRouter}/>
          <Route path="/order/index" component={OrderList}/>
          <Route path="/order/detail/:orderNumber" component={OrderDetail}/>
          <Route path="/user/index" component={UserList}/>
          <Redirect exact from="/order" to="/order/index" />
          <Redirect exact from="/user" to="/user/index" />
          {/* 如果匹配不到，就把所有的匹配到/ */}
          {/* <Redirect from="*" to="/" /> */}
          <Route component={ErrorPage}/>
        </Switch>
      </Layout>
    );
    return (
      <Router>
        <Switch>
          <Route path="/Login" component={Login}/>
          <Route path="/"  render={ (props) => LayoutRouter }/>
        </Switch>
      </Router>
    );
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('app')
)